<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">

        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

        <title>萌校商城后台</title>
        <script src="<%=path %>/assets2/js/validation/validate.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/validationEngine.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/messages_zh.min.js"></script>
        <script src="<%=path %>/assets2/js/jquery.form.js"></script>
    </head>
    <div class="row">
	<ol class="breadcrumb">
		<li><a href="<%=path%>/index"><span
				class="glyphicon glyphicon-home"></span></a></li>
		<li class="active">店铺管理</li>
	</ol>
</div>

<div class="panel panel-default">
	<div class="panel-heading">店铺信息</div>
	<div class="panel-body">
		<form class="form-validation" id="fm" action="<%=path%>/web/shopUpdate"
			method="post" enctype="multipart/form-data">
			<div class="row">
				<div class="col-md-6 form-group">
					<label>店铺名称</label> <input type="text"
						class="input-sm validate[required,maxSize[15]] form-control" id="merchantName"
						name="merchantName">
				</div>
				<div class="col-md-6 form-group">
					<label>店铺类型</label> <select name="merchartClassifyId"
						id="merchartClassifyId"
						class="form-control input-sm validate[required]">
						<option value="">请选择</option>
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 form-group">
					<label>店铺地址</label> <input type="text"
						class="input-sm validate[required] form-control"
						id="merchantAddress" name="merchantAddress">
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 form-group">
					<label>店铺简介</label>
					<textarea class="input-sm form-control validate[required]"
						id="merchartIntro" name="merchartIntro"></textarea>
				</div>
			</div>
			<div class="row">
				<div class="form-group col-md-12">
					<label>店铺照片</label>
					<div class="row" id="merchantHeadImgDiv">
						<input type="text" name="merchantHeadImg" id="merchantHeadImg" style="display: none;">
						<input type="file" name="merchantHeadImgMain" id="merchantHeadImgMain" style="display: none;">
						<div class="col-xs-2 col-md-1" id="addMerchantHeadImgDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addMerchantHeadImg()"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group col-md-12">
					<label>店铺内饰</label>
					<div class="row" id="merchantInteriorImgPhotoDiv">
						<input type="text" class="merchantInteriorImg" name="merchantInteriorImg" id="merchantInteriorImg1" style="display: none;">
						<input type="text" class="merchantInteriorImg" name="merchantInteriorImg" id="merchantInteriorImg2" style="display: none;">
						<input type="text" class="merchantInteriorImg" name="merchantInteriorImg" id="merchantInteriorImg3" style="display: none;">
						<input type="text" class="merchantInteriorImg" name="merchantInteriorImg" id="merchantInteriorImg4" style="display: none;">
						<input type="text" class="merchantInteriorImg" name="merchantInteriorImg" id="merchantInteriorImg5" style="display: none;">
						
						<input type="file" class="merchantInteriorImgPhoto" name="merchantInteriorImgPhoto" id="merchantInteriorImgPhoto1" style="display: none;">
						<input type="file" class="merchantInteriorImgPhoto" name="merchantInteriorImgPhoto" id="merchantInteriorImgPhoto2" style="display: none;">
						<input type="file" class="merchantInteriorImgPhoto" name="merchantInteriorImgPhoto" id="merchantInteriorImgPhoto3" style="display: none;">
						<input type="file" class="merchantInteriorImgPhoto" name="merchantInteriorImgPhoto" id="merchantInteriorImgPhoto4" style="display: none;">
						<input type="file" class="merchantInteriorImgPhoto" name="merchantInteriorImgPhoto" id="merchantInteriorImgPhoto5" style="display: none;">
						<div class="col-xs-2 col-md-1"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addMerchantInteriorImgPhoto()"></div>
					</div>
				</div>
			</div>
		</form>
		<div class="form-group text-center">
			<br> <br>
			<button class="btn btn-lg btn-primary" onclick="sub()" type="button" id="subBtn">提交修改</button>
		</div>
	</div>
</div>


</body>
   <script type="text/javascript">
   (function(){
		if($("[class*='form-validation']")[0]) {
		    $("[class*='form-validation']").validationEngine();
		    $('body').on('click', '.validation-clear', function(e){
			e.preventDefault();
			$(this).closest('form').validationEngine('hide');
		    });
		}
	})();
   $(function(){
		$.ajax({
			 type:"POST",
	         url: "<%=path%>/web/getShopClassifyList",
						success : function(data, status, xhr) {
							for (var i = 0; i < data.length; i++) {
								$("#merchartClassifyId").append(
										"<option value='"+data[i].classifyId+"'>"
												+ data[i].classifyName
												+ "</option>");
							}
							$.ajax({
								type : "POST",
								url : "<%=path %>/web/getShopInfo",
	    	         success: function(data,status,xhr){
	    	        	 $("#merchantName").val(data.merchant.merchantName);
	    	        	 $("#merchartClassifyId").val(data.merchant.merchartClassifyId);
	    	        	 $("#merchantAddress").val(data.merchant.merchantAddress);
	    	        	 $("#merchartIntro").html(data.merchant.merchartIntro);
	    	        	 $("#userName").val(data.userName);
	    	        	 $("#idNo").val(data.idNo);
	    	        	 $('#merchantHeadImg').val(data.merchant.merchantHeadImg);
	    	        	 $('#merchantHeadImgDiv').append('<div class="col-xs-3 col-md-2" id="addMerchantHeadImgDiv"><img class="img-responsive" src="<%=path %>/web/getGoodsPhoto?photoUrl='+data.merchant.merchantHeadImg+'" style="position:relative">'
									+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delTextMainPhoto()" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
									+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
						 $('#addMerchantHeadImgDiv').remove();
						 var merchantImages=data.merchant.merchantInteriorImg.split(',');
						 for(var i=0;i<merchantImages.length;i++){
							if(merchantImages[i]!=null&&merchantImages[i]!=''){
								var textFileId ='merchantInteriorImg'+(i+1);
								$('#'+textFileId).val(merchantImages[i]);
								$('#merchantInteriorImgPhotoDiv').append('<div class="col-xs-3 col-md-2" id="'+textFileId+'Div"><img class="img-responsive" src="<%=path %>/web/getGoodsPhoto?photoUrl='+merchantImages[i]+'" style="position:relative">'
										+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delTextPhoto('+textFileId+')" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
										+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
							}
						 }
	    	         }
	    		})
	         }
		});
		
		
	$('#merchantHeadImgMain').on('change',function(){
		var fileName=this.value;
		while (fileName.indexOf("\\") != -1)
		{
	    fileName = fileName.slice(fileName.indexOf("\\") + 1);
		}
	    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
	    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
	    {
	    	swal({ 
				title: "操作失败", 
				text: "商品图片格式仅支持PNG、JPG", 
				type: "error",
			});
	    	return false;
	    }
		var objUrl = getObjectURL(this.files[0]);
		$('#merchantHeadImgDiv').append('<div class="col-xs-3 col-md-2" id="addMerchantHeadImgDiv"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
				+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delMainPhoto()" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
				+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
		$('#addMerchantHeadImgDiv').remove();
	});
	
	//商家内饰照片展示
	$('.merchantInteriorImgPhoto').on('change',function(){
		var fileName=this.value;
		while (fileName.indexOf("\\") != -1)
		{
	    fileName = fileName.slice(fileName.indexOf("\\") + 1);
		}
	    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
	    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
	    {
	    	swal({ 
				title: "操作失败", 
				text: "商品图片格式仅支持PNG、JPG", 
				type: "error",
			});
	    	return false;
	    }
		var objUrl = getObjectURL(this.files[0]);
		var photoDivId=this.id+"Div";
		$('#merchantInteriorImgPhotoDiv').append('<div class="col-xs-3 col-md-2" id="'+photoDivId+'"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
				+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delPhoto('+this.id+')" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
				+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
		});
		
   });
  function sub(){
	  if($("#fm").validationEngine("validate")){
		  $('#fm').ajaxSubmit({
			beforeSubmit:function(){
				layer.load(0, {shade: false}); 
			},success:function(data) { 
				layer.closeAll('loading');
				if(data.state==1){
					swal({ 
						  title: "操作成功", 
						  text: "店铺修改成功", 
						  type: "success",
						});
				}else{
					swal({ 
						  title: "操作失败", 
						  text: data.msg, 
						  type: "error",
						});
				}
			},error:function(){
				layer.closeAll('loading');
				swal({ 
					  title: "操作失败", 
					  text: "网络出现了异常~", 
					  type: "error",
					});
            }
	  })
  }
  }
 	//添加商家的内饰方法
	function addMerchantInteriorImgPhoto(){
		var i=0;
		$('.merchantInteriorImg').each(function(){
		    if($(this).val()!=null && $(this).val()!=''){
		    	i++;
		    }
		});
		$('.merchantInteriorImgPhoto').each(function(){
			if($(this).val()!=null && $(this).val()!=''){
		    	i++;
		    }
		});
		if(i>=5){
			swal({ 
				  title: "操作失败", 
				  text: "商品图片不得大于5张图片", 
				  type: "error",
				});
		}else{
			$('.merchantInteriorImgPhoto').each(function(){
			    if($(this).val()==null||$(this).val()==''){
			    	$(this).click();
			    	$(this).attr("name","merchantInteriorImgPhoto");
			    	return false;
			    }
			  });
		}
	}
		
	function delPhoto(file){
			var fileId=file.id;
			$('#'+fileId).val('');
			$('#'+fileId+"Div").remove();
		}
		function delTextPhoto(text){
			var id=text.id;
			$('#'+id).val('');
			$('#'+id+"Div").remove();
		}
		//店铺头像添加
		function addMerchantHeadImg(){
			$('#merchantHeadImgMain').click();
		}
		//店铺头像删除
		function delMainPhoto(){
			$('#merchantHeadImgMain').val('');
			$('#addMerchantHeadImgDiv').remove();
			$('#merchantHeadImgDiv').append('<div class="col-xs-2 col-md-1" id="addMerchantHeadImgDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addMerchantHeadImg()"></div>');
		}
		function delTextMainPhoto(){
			$('#merchantHeadImg').val('');
			$('#addMerchantHeadImgDiv').remove();
			$('#merchantHeadImgDiv').append('<div class="col-xs-2 col-md-1" id="addMerchantHeadImgDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addMerchantHeadImg()"></div>');
		}
		//建立一個可存取到該file的url  
		function getObjectURL(file) {  
		  var url = null ;   
		  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
		  if (window.createObjectURL!=undefined) { // basic  
		    url = window.createObjectURL(file) ;  
		  } else if (window.URL!=undefined) { // mozilla(firefox)  
		    url = window.URL.createObjectURL(file) ;  
		  } else if (window.webkitURL!=undefined) { // webkit or chrome  
		    url = window.webkitURL.createObjectURL(file) ;  
		  }  
		  return url ;  
		}  
   
   
   
   </script>
</html>